<template>
	<view>
		<view style="height: 7px;"></view>
		<view class="zhuangtaibox">
			<view class="zhuangtai" style="font-size: 17px;">
				{{refund_status}}
			</view>
		</view>
		<view class="tuibox">
			<view class="goodsbox">
				<view>
					<image :src="swichImg()" style="width: 120rpx;height: 120rpx;">
				</view>
				<view>
					<view class="gname">{{goods.gname}}</view>
					<view class="gjianjie">{{goods.jianjie}}</view>
				</view>
				<view class="gnum">x{{refundInfo.refund_number}}</view>
			</view>
			<view class="reasons">
				<view style="display: flex;justify-content: space-between;">
					<span style="font-size: 12px;">申请原因：</span>
					<view style="font-size: 12px;padding-left: 10rpx;">{{refund_reason}}</view> 
				</view>
			</view>
			<view class="reasons">
				<span style="font-size: 12px;width: 240rpx;">退货/退款说明：</span>
				<span style="font-size: 12px;word-break: break-all;">{{refundInfo.refund_describe}}</span>
			</view>
			<view class="reasons" v-if="isShensu">
				<view style="display: flex;">
					<span style="font-size: 12px;">申诉理由：</span>
					<view id='liyou' style="font-size: 12px;">{{refundInfo.shensuyuanyin}}</view> 
				</view>
			</view>
			<view class="reasons" v-if="isUserAddress">
				<view style="font-size: 12px;">收货地址:</view>
				<view>
					<view style="padding-left:5px;" @click="value = true">{{userAddress}}</view>
					<input type="text" v-if="isUserAddressInput" v-model="userDizhi" @input="userDizhis" placeholder="请输入详细地址" style="border: 1px solid bisque;padding: 0px;flex: 6;" />
				</view>
			</view>
			<view class="reasons">
				<view style="font-size: 12px;line-height:22px;">联系方式：</view>
				<view>
					<input type="number" @input="inputTel" :disabled="teldisabled" placeholder="请输入电话" v-model="tel" style="padding: 0px;margin: 0px;">
				</view>
			</view>
			<view class="reasons" v-if="isReject">
				<view style="font-size: 12px;">驳回原因：</view>
				<view id="rejectYuanyin">{{bohuireason}}</view>
			</view>
			<view class="pics">
				<view style="font-size: 14px;color: #3bb4f2;">照片凭证</view>
				<view style="display: flex;">
					<image class="pingzheng" :src="tu1" v-if="tu1!=''"></image>
					<image class="pingzheng" :src="tu2" v-if="tu2!=''"></image>
					<image class="pingzheng" :src="tu3" v-if="tu3!=''"></image>
				</view>
			</view>
			<view class="store-address" v-if="isStoreAddress">
				<view>商家收货地址：
					<span>{{refundInfo.gongsi_address}}</span>
				</view>
			</view>
			<view style="font-size: 14px;" v-if="kuaidi">
				<view v-if="zhidingKuaidi" style="display: flex;">
					<view style="width: 230rpx;">商家指定的快递：</view>
					<view>{{refundInfo.gongsi_express_type}}</view>
				</view>
				
				<view style="display: flex;margin-top: 10px;">
					<view style="flex: 2;">退货快递号：</view>
					<input type="text" :disabled="danhaoDisabled" v-model="kuaididan" @input="kuaididanhao" style="border: 1px solid bisque;padding: 0px;flex: 6;" />
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 30rpx;padding-bottom: 100rpx;">
			<button v-if="submit" type="button" @click="tijiao()" style="width: 200rpx;height: 70rpx;line-height: 70rpx;background-color: #dd524d;color: white;font-size: 14px;">提交</button>
			<button v-if="back" type="button" @click="getBack()" style="width: 200rpx;height: 70rpx;line-height: 70rpx;background-color: #dd524d;color: white;font-size: 14px;">返回</button>
		</view>
		<!-- 城市弹出层 -->
		<view class="u-demo-area">
			<city-select v-model="value" @city-change="cityChange"></city-select>
		</view>
	</view>
</template>

<script>
	import citySelect from '../center/ucitySelectPP.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				id:'',			 					//退换货ID
				refundInfo:{},	 					//退换货信息
				goods:{},		 					//商品信息
				refund_status:'退换货/退款进行中',	//退换货状态
				refund_reason:'',					//申请退换货原因
				isShensu:false,						//是否显示申诉理由
				isUserAddress:false,				//是否显示用户收货地址
				isUserAddressInput:false,			//是否显示用户地址输入框
				userAddress:"点击选择",				//用户地址
				userDizhi:'',						//用户文本框填写的详细地址
				tel:'',			 					//用户联系电话
				teldisabled:false,					//手机号码是否设置只读
				bohuireason:'',  					//驳回原因
				isReject:false,						//是否显示驳回原因
				tu1:'',			 					//照片凭证1
				tu2:'',			 					//照片凭证2
				tu3:'',			 					//照片凭证3
				isStoreAddress:false,				//是否显示商家收货地址
				kuaidi:false,	 					//是否显示快递信息
				zhidingKuaidi:false,				//是否显示商家指定快递
				kuaididan:'',    					//快递单号
				danhaoDisabled:false,				//快递单号是否设置为只读
				submit:false,	 					//是否显示提交按钮
				back:false,	 						//是否显示返回按钮
				// key: '2f7f27be426ba68483764cd2e9f2c968',//高德Key
				value: false,
			}
		},
		onLoad(opt) {
			this.id = opt.id;
			this.getRefundInfo()
		},
		methods: {
			//用户填写详细地址
			userDizhis(e){
				this.userDizhi = e.target.value;
			},
			//用户选择地址
			cityChange(e) {
				// console.log("省份："+e.province.label+" 城市："+e.city.label+" 区县："+e.area.label)
				let sheng = e.province.label;
				let shi = e.city.label;
				let qu = e.area.label;
				if(this.isNull(sheng)){
					sheng = ""
				}
				if(this.isNull(shi)){
					shi = ""
				}
				if(this.isNull(qu)){
					qu = ""
				}
				this.userAddress = sheng+"-"+shi+"-"+qu;
			},
			//得退换货详情
			getRefundInfo(){
				this.$http.get('/ppRefund/selectRefundById',{
					id:this.id
				}).then(res => {
					// console.log("退换货ID："+this.id)
					// console.log(res)
					if(res.data.code==200){
						// console.log(res.data)
						//退换货信息
						this.refundInfo = res.data.data;
						//退换货商品信息
						this.goods = res.data.data.ppGoods;
						//用户联系电话
						this.tel = res.data.data.user_contact;
						//用户收货地址
						if(!this.isNull(this.refundInfo.user_address)){
							this.userAddress = this.refundInfo.user_address
						}
						//得照片凭证
						if(res.data.data.picture1!=""){
							this.tu1 = this.host+"/image/ppgxTuiHuanhuoImages/"+res.data.data.picture1;
						}
						if(res.data.data.picture2!=""){
							this.tu2 = this.host+"/image/ppgxTuiHuanhuoImages/"+res.data.data.picture2;
						}
						if(res.data.data.picture3!=""){
							this.tu3 = this.host+"/image/ppgxTuiHuanhuoImages/"+res.data.data.picture3;
						}
						// console.log("-------------")
						// console.log(this.goods)
						// console.log(this.refundInfo)
						this.getRefundReason();//得退换货原因（文字）
						this.getRefundStatus();//得退换货状态（文字）
					}else{
						this.$u.toast("信息查询失败")
					}
				})
			},
			swichImg(){
				if(this.isNull(this.goods.gimages)){
					return '../../../static/center/tuijian.png'
				}else{
					return this.host+this.goods.gimages
				}
			},
			//得退换货状态
			getRefundReason(){
				let zt="";
				switch(this.refundInfo.refund_reason){
					case 0:zt='其他';break
					case 1:zt='7天无理由退货';break
					case 2:zt='质量问题';break
					case 3:zt='发票问题';break
					case 4:zt='不喜欢了/不爱了';break
					case 5:zt='拍错了/看错了';break
					case 6:zt='未按约定时间发货';break
				}
				this.refund_reason = zt;
			},
			//显示隐藏
			getRefundStatus(){
				let shensuStatus = this.refundInfo.shensu;			//申诉状态
				let refundStatus = this.refundInfo.refund_status;	//退换货状态
				let refundType = this.refundInfo.refund_type;		//退换货类型
				let userKuaidihao = this.refundInfo.user_express_numbers;//用户快递编号
				if(refundType==2){//换货显示用户地址
					this.isUserAddress = true;
					this.isUserAddressInput = true;
				}
				if(shensuStatus==0){
					if(refundStatus==0){
						this.back = true;
						this.submit = false;
						this.isUserAddress = false;
						this.isStoreAddress = false;
						this.isShensu = false;
						this.kuaidi = false;
					}else if(refundStatus==1){
						this.refund_status = "审核不通过";
						this.submit = false;
						this.back = true;
						this.isReject = true;
						this.isStoreAddress = false;
						this.bohuireason = this.refundInfo.refund_disagree_reason;
						this.teldisabled = true;
						this.kuaidi = false;
						this.isUserAddress = false;
					}else if(refundStatus==2){
						if(userKuaidihao!=null && userKuaidihao!=""){
							this.refund_status = "商品已寄回，等待商家收货";
							this.back = true;
							this.submit = false;
							this.isShensu = false;
							this.kuaididan = this.refundInfo.user_express_numbers;
							this.danhaoDisabled = true;
							this.isUserAddress = true;
							this.isUserAddressInput = false;
							this.isStoreAddress = true;
							this.kuaidi = true;
							this.zhidingKuaidi = true;
						}else{
							this.submit = true;
							this.back = false;
							this.isStoreAddress = true;
							this.kuaidi = true;
							this.zhidingKuaidi = true;
							this.isShensu = false;
							this.teldisabled = true;
							this.kuaididan = this.refundInfo.gongsi_express_numbers;
						}
					}else if(refundStatus==3){
						this.refund_status = "商家已收到货";
						this.submit = false;
						this.back = true;
						this.kuaididan = this.refundInfo.user_express_numbers;
						this.danhaoDisabled = true;
						this.isUserAddress = true;
						this.isUserAddressInput = false;
						this.isStoreAddress = true;
						this.kuaidi = true;
						this.zhidingKuaidi = true;
					}else if(refundStatus==4){
						this.refund_status = "商家已发货，请等待收货";
						this.kuaididan = this.refundInfo.user_express_numbers;
						this.isStoreAddress = true;
						this.userDizhi = this.userAddress.substr(this.userAddress.indexOf(" "),this.userAddress.length)
						this.kuaidi = true;
						this.zhidingKuaidi = true;
						this.danhaoDisabled = true;
						this.isUserAddress = true;
						this.isUserAddressInput = false;
						this.submit = false;
						this.back = true;
					}else if(refundStatus==5){
						this.refund_status = "换货成功";
						this.kuaididan = this.refundInfo.user_express_numbers;
						this.danhaoDisabled = true;
						this.isUserAddress = true;
						this.isUserAddressInput = false;
						this.submit = false;
						this.back = true;
					}else if(refundStatus==6){
						this.refund_status = "退款成功";
						this.teldisabled = true;
						this.isStoreAddress = false;
						this.kuaidi = false;
						this.submit = false;
						this.back = true;
					}else if(refundStatus==7){
						this.refund_status = "退货成功";
						this.kuaididan = this.refundInfo.user_express_numbers;
						this.danhaoDisabled = true;
						this.isStoreAddress = true;
						this.kuaidi = true;
						this.zhidingKuaidi = true;
						this.submit = false;
						this.back = true;
					}
				}else if(shensuStatus==1){
					this.refund_status = "申诉中";
					this.isShensu = true;
					this.isStoreAddress = false;
					this.kuaidi = false;
					this.submit = false;
					this.back = true;
				}else if(shensuStatus==2){
					this.refund_status = "申诉驳回";
					this.isStoreAddress = false;
					this.kuaidi = false;
					this.isShensu = true;
					this.isReject = true;
					this.submit = false;
					this.back = true;
				}else if(shensuStatus==3){
					if(refundType==3){
						this.refund_status = "申诉通过,已打款";
						this.isShensu = true;
						this.isStoreAddress = false;
						this.kuaidi = false;
						this.submit = false;
						this.back = true;
					}else{
						this.refund_status = "申诉通过,请尽快发货";
						this.submit = true;
						this.isStoreAddress = true;
						this.kuaidi = true;
						this.isShensu = false;
						this.teldisabled = true;
						this.kuaididan = this.refundInfo.gongsi_express_numbers;
						this.back = false;
						if(userKuaidihao!=null && userKuaidihao!=""){
							this.back = true;
							this.submit = false;
						}
						if(refundStatus==3){
							this.refund_status = "商家已收到货";
							this.kuaididan = this.refundInfo.user_express_numbers;
							this.danhaoDisabled = true;
							this.submit = false;
							this.back = true;
							this.isUserAddress = true;
							this.isUserAddressInput = false;
							this.isStoreAddress = true;
							this.kuaidi = true;
							this.zhidingKuaidi = true;
						}else if(refundStatus==4){
							this.refund_status = "商家已发货，请等待收货";
							this.kuaididan = this.refundInfo.user_express_numbers;
							this.danhaoDisabled = true;
							this.submit = false;
							this.back = true;
						}else if(refundStatus==5){
							this.refund_status = "换货成功";
							this.kuaididan = this.refundInfo.user_express_numbers;
							this.danhaoDisabled = true;
							this.submit = false;
							this.back = true;
						}else if(refundStatus==7){
							this.refund_status = "退货成功";
							this.kuaididan = this.refundInfo.user_express_numbers;
							this.danhaoDisabled = true;
							this.submit = false;
							this.back = true;
						}
					}
				}
			},
			//填写快递单号
			kuaididanhao(e){
				this.kuaididan = e.target.value;
			},
			//填写电话号码
			inputTel(e){
				this.tel = e.target.value;
			},
			//提交退换货信息
			tijiao(){
				console.log("点击提交了")
				let userDizhi = this.userAddress+"-"+this.userDizhi;//用户换货填写的地址
				if(this.tel==null || this.tel==""){
					this.$u.toast("请输入联系方式");
					return
				}
				if(this.kuaididan==null || this.kuaididan==""){
					this.$u.toast("请输入退货快递单号");
					return
				}
				if(this.refundInfo.refund_type==2){
					if(this.userAddress==null || this.userAddress==""){
						this.$u.toast("请选择换货地址")
						return
					}
					if(this.userDizhi==null || this.userDizhi==""){
						this.$u.toast("请输入详细的换货地址");
						return
					}
				}
				this.$http.get('/ppRefund/userSubmitShouFahuoInfo',{
					id:this.id,
					kuaididanhao:this.kuaididan,
					aid:this.userAddress+" "+this.userDizhi
				}).then(res => {
					if(res.data.code==200){
						this.$u.toast("提交成功，等待商家收货");
						setTimeout(()=>{
							uni.redirectTo({
								url:'refundList'
							})
						},500)
					}else{
						this.$u.toast("提交失败");
					}
				})
			},
			//返回
			getBack(){
				console.log("点击返回了")
				uni.navigateTo({
					url:'refundList'
				})
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.store-address{
		margin-top: 15px;
	}
	.pingzheng{
		width: 240rpx;
		height: 220rpx;
	}
	._citys span { color: #56b4f8; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 1em; top: 10px; border: 1px solid #56b4f8; cursor: pointer; }
	._citys0 li { float:left; height:34px;line-height: 34px;overflow:hidden; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; background-color: lightblue;}
	._citys1 a {  height: 35px; display: block; color: #666; padding-left: 6px; margin-top: 3px; line-height: 35px; cursor: pointer; font-size: 13px; overflow: hidden; }
	._citys1 a:hover { color: #fff; background-color: #56b4f8; }
	.ui-content{
		border: 1px solid #EDEDED;
	}
	li{
		 list-style-type: none;
	}
	.zhuangtaibox{
		background-color: white;
		padding: 10px;
		margin-bottom: 6px;
	}
	.tuibox{
		padding: 10px;
		background-color: white;
	}
	.goodsbox{
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}
	#gimage{
		width: 60px;
		height: 60px;
	}
	.gname,.gjianjie{
		font-size: 14px;
		margin-bottom: 5px;
	}
	.gjianjie{
		color: #cccccc;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.reasons{
		display: flex;
		margin-bottom: 15px;
	}
	.reasons input{
		border: none;
	}
	.pics img{
		width: 75px;
		height: 100px;
		margin-right: 10px;
	}
	/* 图片放大*/
	#fullPage{
		display: none;
		background: black;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 19930428;
	}
	#fullPage img{
		display: block;
		width: 100%;
	}
	#canvas{
		width: 100%;
		height: 100%;
		background: none;
		display: block;
	}
	#reject{
		background-color: white;
		justify-content: flex-start;
	}
	#rejectYuanyin{
		font-size: 14px;
	}
</style>
